<template>
    <div id="mem-page">
        <el-dialog
            :title="$t('key_69')"
            v-model="isMemDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="769px" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                <el-form class="box-f" ref="queryForm" :inline="true">
                    <el-form-item :label="$t('key_79')">
                        <el-input style="width:120px;" v-model="searchOne" :placeholder="$t('xingMing')" />
                    </el-form-item>
                    <el-form-item v-model="searchTwo" :label="$t('key_80')">
                        <el-input style="width:120px;" :placeholder="$t('gongHao')" />
                    </el-form-item>
                    <el-form-item >
                        <el-button @Click="resetClick" icon="ele-Refresh"> {{ $t('key_14') }} </el-button>
                        <el-button @Click="searchClick" type="primary" icon="ele-Search"> {{ $t('key_15') }} </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px;">
                <el-table
                    ref="multipleTableRef"
                    :data="list"
                    style="width: 100%"
                    :row-key="getRowKey"
                    border 
                    v-loading="loading" 
                    element-loading-background="rgba(0, 0, 0, 0.5)"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="index" :label="$t('key_4')" width="55" align="center" :index="indexMethod" />
                    <el-table-column :label="$t('key_81')" align="center" prop="name" show-overflow-tooltip />
                    <el-table-column :label="$t('key_82')" align="center" prop="status" show-overflow-tooltip>
                        <template #default="scope">
                            <span v-if="scope.row.status === 0">{{ $t('key_83') }}</span>
                            <span v-else-if="scope.row.status === 1">{{ $t('key_84') }}</span>
                            <span v-else>{{ $t('key_10') }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column :label="$t('key_85')" align="center" width="80" >
                        <template #default="scope">
                            <el-checkbox @change="selectChange(scope)" v-model="scope.row.isEnable" size="large" />
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-model:currentPage="pageNo"
                    v-model:page-size="pageSize"
                    :total="totalRows"
                    :page-sizes="[10, 20, 50, 100]"
                    small
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                />
            </el-card>
            
            <template #footer>
                <el-button @click="cancelMemClick">{{ $t('key_24') }}</el-button>
                <el-button type="primary" :disabled="repeatDis" @click="submitForm">{{ $t('key_25') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch, Ref } from 'vue'
import { FormRules } from 'element-plus'
import { sysCheckfuncQuery , sysCheckfuncAddCcPeople } from '/@/api/manage/manage'
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;

import { stat } from 'fs'
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
    list: any[], // 数组
    pageNo: number, // 当前页
    pageIndex: number,
    pageSize: number, // 一页的数量
    totalRows: number, // 总条数
    totalPage: number, // 总页数
}
/*** form 表单数据类型 */
type ruleFormType = {
    id: String, // 主键id
    name: String, // 审核功能名称
    menuID: String, // 菜单id
    disable: Boolean, // 是否启用
    description: '', // 描述
    afterTask: '', // 操作
}
export default defineComponent( {
    name: 'mem-page',
    components: {},
    props: {
        isMemDialog:{
            type: Boolean,
            default: false,
        },
        MemInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref()
        const ruleFormRef = ref()
        const menuOptions = ref()
        const tableData = ref()
        const multipleTableRef:Ref = ref()
        let setArr:any[] = []
        let pageNo:number = 1
        let pageSize:number = 10
        let id:any = ''
        let submitArr:any[] = []
        const searchOne = ref()
        const searchTwo = ref()
        const loading = ref(false)

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            GetData(pageNo,pageSize,id)
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            searchOne.value = ''
            searchTwo.value = ''
            console.log(id,'id')
            GetData(1,10,id)
        }

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType,
            list: [], // 数组
            pageNo: 1, // 当前页
            pageIndex: 1,
            pageSize: 10, // 一页的数量
            totalRows: 0, // 总条数
            totalPage: 0, // 总页数
        })

        /*** selectChange 复选框改变事件 */
        const selectChange = (val:any) => {
            if(submitArr.length === 0){
                submitArr.push(toRaw(val.row).jobNum)
            }else{
                if(toRaw(val.row).isEnable){
                    submitArr.push(toRaw(val.row).jobNum)
                }else{
                    submitArr.forEach((item,index) => {
                        if(parseInt(toRaw(val.row).jobNum) === parseInt(item)){
                            submitArr.splice(index,1)
                            return
                        }
                    })
                }
            }
        }

        const getRowKey = (row:any) => {
            return row.dpriceConfId
        }

        // 设置序列号
        const indexMethod = (index: number) => {
            if (state.pageNo > 1) {
                return index + 1 + (Number(state.pageNo) - 1) * Number(state.pageSize);
            } else {
                return index + 1;
            }
        }

        const handleSizeChange = (val:any) => {
            pageSize = val
            GetData(pageNo,val,id)
        } 

        const handleCurrentChange = (val:any) => {
            pageNo = val
            GetData(val,pageSize,id)
        }

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            name: [
				{ required: true, message: $t('key_70'), trigger: 'blur' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelMemClick')
        }

        /*** cancelMemClick 取消事件 */
        const cancelMemClick = () => {
            ctx.emit('cancelMemClick')
        }

        /*** delStrFun 删除指定位置字符 */
        const delStrFun = (str:any,n: any) => {
            str = [...str]
            let idx = str.lastIndexOf(n)
            str.splice(idx , 1)
            return str.join('')
        }

        /*** submitForm 提交事件 */
        const submitForm = async () => {
            let CcPeopleData:any = ''
            if(submitArr.length !== 0){
                let GrNeedInfo:string = ''
                submitArr.map(i => {
                    GrNeedInfo += (i + ',')
                })
                CcPeopleData = ',' + delStrFun(GrNeedInfo,',')
            }else{
                CcPeopleData = null
            }
            let param = {
                CcPeople: CcPeopleData,
                id: JSON.parse(props.MemInfo).id,
            }
            console.log(param,'param')
            let res:any = await sysCheckfuncAddCcPeople(param)
            if(res.success){
                state.repeatDis = true
                ctx.emit('controlMemClick')
                ctx.emit('updateData')
            }else{
                ctx.emit('controlMemClick')
            }
        }

        /*** handleSelectionChange 复选框选中事件 */
        const handleSelectionChange = (val:any) => {
            setArr = val
        }
        
        /*** GetData 获取数据 */
        const GetData = async (n:number,s:number,i:any) => {
            loading.value = true
            let param:any = new Object()
            param.pageNo = n
            param.pageSize = s
            param.id = i
            if(searchOne.value !== undefined){
                param.StaffName = searchOne.value
            }
            if(searchTwo.value !== undefined){
                param.StaffID = searchTwo.value
            }
            console.log(param,'param')
            let res:any = await sysCheckfuncQuery(param)
            if(res.success){
                state.list = res.data.rows
                state.pageIndex = res.data.pageSize
                state.pageIndex = res.data.pageNo
                state.totalPage = res.data.totalPage
                state.totalRows = res.data.totalRows
                loading.value = false
            }
        }
        /*** 监听isMemDialog的变化 */
        watch(() => [props.isMemDialog],([newLog]) => {
            if(newLog){
                // console.log(JSON.parse(props.MemInfo),'ccPeople')
                state.repeatDis = false
                id = JSON.parse(props.MemInfo).id
                if(JSON.parse(props.MemInfo).ccPeople && JSON.parse(props.MemInfo).ccPeople !== ''){
                    submitArr = JSON.parse(props.MemInfo).ccPeople.split(',').slice(1)
                }
                let setTime = setInterval(() => {
                    pageNo = 1
                    pageSize = 10
                    state.pageNo = 1
                    state.pageSize = 10
                    searchOne.value = ''
                    searchTwo.value = ''
                    GetData(1,10,JSON.parse(props.MemInfo).id)
                    clearInterval(setTime)
                },20)
            }
        })

        /*** isMemDialog 响应弹窗的关闭  */
        const isMemDialog = computed(() => {
            return props.isMemDialog
        })

        return {
            handleClose,
            submitForm,
            cancelMemClick,
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            isMemDialog,
            rules,
            menuOptions,
            handleSelectionChange,
            tableData,
            handleSizeChange,
            handleCurrentChange,
            indexMethod,
            getRowKey,
            multipleTableRef,
            selectChange,

            searchOne,
            searchTwo,
            searchClick,
            resetClick,
            loading,
        }
    },
} )
</script>
<style scoped lang="scss">
    .m-2{
        width: 100%;
        :deep(.el-input__inner){
            height: 30px;
        }
    }
    :deep(.el-checkbox){
        height: 32px!important;
    }
    :deep(.el-form-item){
        margin-right: 20px!important;
    }
    .box-f{
        :deep(.el-form-item__label){
            padding: 0;
        }
    }
</style>